<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Seed</title>
    <script src="title.js"></script>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/vue/2.4.2/vue.js"></script>
    <script src="lib/vue/vue-router.js"></script>
    <script src="lib/elementui/1.4.3/index.js"></script>
    <script src="lib/extends/tree-table.js"></script>
    <script src="lib/ztree/ztree-vue.js"></script>

    <script src="lib/czyseed/index.js"></script>
    <script src="common/util/czy.util.js"></script>

    <script src="lib/requirejs/require-2.3.5.js" data-main="seed-main"></script>

    <!--<script src="/lib/requirejs/require-2.3.5.js" defer async="true" data-main="/common/js/main"></script>-->

    <link rel="stylesheet" href="lib/elementui/1.4.3/theme-default/index.css">
    <link rel="stylesheet" href="lib/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="lib/czyseed/index.css">

    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }

        #main-panel {
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
        }

        #main-panel .header {
            /*height: 6%;*/
            height: 45px;
            line-height: 45px;
            /*background: #20a0ff;*/
            background: #1870b4;
            color: #fff;
        }

        #main-panel .left {
            height: 100%;
            background-color: #324057;
            float: left;
        }

        #main-panel .left .nav-menu {
            overflow: auto;
            /*height: 94%;*/
            /*background-color: #324057;*/
        }

        #main-panel .right {
            overflow: auto;
            height: 100%;
        }

        /*重写菜单栏高度*/
        #main-panel .el-submenu .el-menu-item {
            height: 40px;
            line-height: 40px;
        }

        #main-panel .el-submenu__title {
            height: 45px;
            line-height: 45px;
        }

        /*重写左侧菜单宽度*/
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 230px;
        }

        /*重写tab样式*/
        #main-panel .right .el-tabs--border-card {
            background: #fff;
            border: 0px solid #d1dbe5;
        }

        #main-panel .right .el-popover, .el-tabs--border-card {
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
        }

        #main-panel .el-tabs--border-card>.el-tabs__content {
            padding: 5px 5px 5px 5px;
        }

        #main-panel .el-tabs__item {
            height: 35px;
            line-height: 35px;
        }

        /*v-cloak解决vue解析闪烁问题*/
        [v-cloak] {
            display: none!important;
        }
    </style>

</head>

<body>

<div id="main-panel" v-cloak>

    <!--左侧菜单区域-->
    <div class="left">
        <!--header区域-->
        <el-row class="header">
            <el-col><div style="min-width: 100%;text-align: center">{{logo}}</div></el-col>
        </el-row>
        <!--菜单栏区域-->
        <!--<el-row class="nav-menu">-->
        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" theme="dark" :collapse="collapse">
            <menu-item :item="item" v-for="item in menuList" :key="item.name"></menu-item>
        </el-menu>
        <!--</el-row>-->
    </div>

    <!--右侧区域-->
    <!--header-->
    <div class="right">
        <!--头部工具栏-->
        <el-row class="header">
            <el-col :span="1">
                <i class="fa fa-reorder" style="cursor:pointer" @click="collapseMenu"></i>
            </el-col>
            <el-col :span="23" style="text-align: right; padding-right: 20px">
                <el-button type="text" style="color:white" @click="logout">退出</el-button>
            </el-col>
        </el-row>
        <!--功能页面加载区-->
        <el-row>
            <el-tabs type="border-card" :closable="true" v-model="activeName" @tab-remove="removeTab"
                     @tab-click="tabClick" style="z-index: 2">
                <el-tab-pane v-for="(item, index) in pageTables"
                             :key="item.id"
                             :label="item.label"
                             :name="item.name" >
                    <transition :name="transition">
                        <keep-alive>
                            <router-view :name="'view' + item.id"></router-view>
                        </keep-alive>
                    </transition>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</body>
</html>